<template>
	<view class="department-item" :class="'level-' + level">
		<view class="department-header" @tap="toggleExpand">
			<text class="expand-icon">{{ expanded && department.children && department.children.length > 0 ? '▼' : (department.children && department.children.length > 0 ? '▶' : '') }}</text>
			<text class="department-name">{{ department.name }}</text>
			<text class="department-type">{{ types[department.type] }}</text>
		</view>
		
		<view v-if="expanded && department.children && department.children.length > 0" class="children-container">
			<view class="tree-line" :class="'level-' + level"></view>
			<department-item
				v-for="(child, index) in department.children"
				:key="child._id"
				:department="child"
				:level="level + 1"
			></department-item>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'department-item',
		props: {
			department: Object,
			level: Number
		},
		data() {
			return {
				expanded: false,
				types:{
					department:'部门',
					team:'团队',
					employee:'员工'
				}
			}
		},
		methods: {
			toggleExpand() {
				if (this.department.children && this.department.children.length > 0) {
					this.expanded = !this.expanded;
					this.$emit('toggle', this.department._id);
				}
			}
		}
	}
</script>

<style scoped>
	.department-item {
		margin-bottom: 10rpx;
	}
	
	.department-header {
		display: flex;
		align-items: center;
		padding: 20rpx;
		background-color: #f5f7fa;
		border-radius: 8rpx;
		transition: background-color 0.3s;
	}
	
	.department-header:active {
		background-color: #e6e8eb;
	}
	
	.expand-icon {
		width: 40rpx;
		font-size: 24rpx;
		color: #999;
		text-align: center;
	}
	
	.department-name {
		flex: 1;
		font-size: 30rpx;
		color: #333;
		margin-left: 20rpx;
	}
	
	.department-type {
		font-size: 24rpx;
		color: #666;
		background-color: #e8e8e8;
		padding: 4rpx 20rpx;
		border-radius: 16rpx;
	}
	
	.children-container {
		position: relative;
		margin-left: 40rpx;
		margin-top: 10rpx;
		padding-left: 30rpx;
	}
	
	.tree-line {
		position: absolute;
		left: 20rpx;
		top: 0;
		bottom: 0;
		width: 2rpx;
		background-color: #e8e8e8;
	}
	
	/* 不同层级的样式 */
	.level-0 .department-name {
		font-weight: bold;
	}
	
	.level-1 .department-header {
		background-color: #f0f2f5;
	}
	
	.level-2 .department-header {
		background-color: #fafafa;
	}
	
	.level-3 .department-header {
		background-color: #ffffff;
		border: 1px solid #f0f0f0;
	}
</style>